<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="maqettadocs.css" />
<title>BorderContainer Basics</title>
</head>
<body class="maqettadocs">

<div id="pagebody">

<table class="breadcrumbs noprint"><tr>
	<td> &nbsp; </td>
    <td class="prevnext">
	<a href="tutorials/BCtutorials.html">Previous</a> / <a href="tutorials/BCGutters.html">Next</a>
    </td></tr>
</table>

<h1>BorderContainer Basics</h1>

<p>BorderContainer is a layout widget that can be customized to fit almost any layout.
It can have up to 5 regions or panes: 4 optional panes (top, bottom, left and right) and a  mandatory center pane.</p>

<p><img src="img/BorderContainers.png" style="width:700px; margin-bottom:0px;" /></p>


<h3>How to create and configure a BorderContainer</h3>
<ol>
<li>Open the <b>Dojo Containers</b> section of the Widgets palette.</li>
<li>Drag a <b>BorderContainer</b> onto the canvas. The <b>Border Container Dialog</b> will pop up.</li>
<li>Select Headline, and uncheck the Right pane.</li>
<li>Click Ok to close the dialog window.</li>
</ol>

<p><i>The BorderContainer default size is set to 100% of the window. You can change this by setting a fixed height and width 
in the Properties palette Layout section.</i></p>
    
<h3>How to view or edit a BorderContainer's configuration</h3>
<ol>
<li>Select the BorderContainer in the Outline palette.</li>
<li>On the canvas, scroll the window down until you see the selection border at the very bottom of the canvas.</li>
<li>Double-click on the selection border to bring up the <b>Border Container Dialog</b>.</li>
</ol>
<p><i>To bring up the Border Container Dialog you must double-click on the widget's border on the canvas.</i></p>


<p class="prevnext"><a href="tutorials/BCtutorials.html">Previous</a> / <a href="tutorials/BCGutters.html">Next</a></p>

</div> <!-- pagebody -->

</body>
</html>